<template>
  <div class="mapbj">
    <img src="@/assets/img/home/lucheng.png" width="852" height="456" usemap="#Map" border="0" style="width: 53.25rem; height: 28.5rem;" />
    <map name="Map" id="Map">
      <!-- 丰门 -->
      <div class="fengmen map_icon" @click="switchMaptwo(1, '丰门','330302033000')">
        <p class="font_w4 font_s20">
          0
          <span>位</span>
        </p>
        <area
          shape="poly"
          coords="107,239,92,237,71,227,58,221,50,217,43,208,38,200,31,195,21,178,14,164,9,153,9,145,10,142,14,139,26,139,41,140,49,135,55,129,55,122,55,113,55,102,59,93,62,80,71,74,75,72,86,68,98,72,110,72,123,72,128,68,134,51,140,38,143,29,150,22,154,19,165,13,173,13,181,21,182,38,183,54,181,67,180,80,181,93,187,105,192,132,195,132,200,134,184,142,169,158,153,181,138,205"
        />
      </div>
      <!-- 双屿 -->
      <div class="shuangyu map_icon" @click="switchMaptwo(2, '双屿','330302027000')">
        <p class="font_w4 font_s20">
          0
          <span>位</span>
        </p>
        <area
          shape="poly"
          coords="204,141,178,157,152,189,137,217,125,226,108,239,115,244,118,252,125,268,125,285,136,293,158,296,188,292,212,291,232,290,244,292,255,298,269,314,284,322,288,313,291,296,285,277,286,255,295,237,322,201,294,191,269,188,238,170"
        />
      </div>
      <!-- 广化 -->
      <div class="guanghua map_icon" @click="switchMaptwo(3, '广化','330302032000')">
        <p class="font_w4 font_s20">
          0
          <span>位</span>
        </p>
        <area
          shape="poly"
          coords="392,200,395,222,393,253,388,265,372,264,354,272,342,284,320,307,301,329,288,329,283,324,290,302,287,277,286,258,297,240,304,228,313,217,324,202"
        />
      </div>
      <!-- 松台 -->
      <div class="songtai map_icon" @click="switchMaptwo(4, '松台','330302026000')">
        <p class="font_w4 font_s20">
          0
          <span>位</span>
        </p>
        <area
          shape="poly"
          coords="427,190,394,199,396,230,391,264,398,279,392,310,388,337,387,342,408,332,422,327,443,325,452,318,458,301,463,285,459,263,450,254,441,244,434,215"
        />
      </div>

      <!-- 五马 -->
      <div class="wuma map_icon" @click="switchMaptwo(5, '五马','330302006000')">
        <p class="font_w4 font_s20">
          0
          <span>位</span>
        </p>
        <area shape="poly" coords="430,188,440,233,454,257,473,266,490,261,514,252,529,250,552,254,560,241,567,235,563,219,565,205,568,198,552,194,521,188,475,184" />
      </div>
      <!-- 大南 -->
      <div class="danan map_icon" @click="switchMaptwo(6, '大南','330302029000')">
        <p class="font_w4 font_s20">
          0
          <span>位</span>
        </p>
        <area
          shape="poly"
          coords="462,260,464,275,464,299,458,317,450,324,464,326,478,327,491,331,509,339,517,344,532,357,537,361,531,341,528,320,526,305,524,285,528,268,534,253,516,251,500,256,481,265"
          href="#danan"
        />
      </div>

      <!-- 南郊 -->
      <div class="nanjiao map_icon" @click="switchMaptwo(7, '南郊','330302031000')">
        <p class="font_w4 font_s20">
          {{ Hqlrsl[2] }}
          <span>位</span>
        </p>
        <area
          shape="poly"
          coords="387,346,383,354,381,374,390,381,395,397,398,413,403,427,406,438,417,444,428,444,442,444,456,442,467,439,477,430,488,424,494,412,506,399,525,390,535,385,543,380,539,373,532,363,524,349,511,341,490,334,473,326,448,326,427,329,406,338"
        />
      </div>
      <!-- 南汇 -->
      <div class="nanhui map_icon" @click="switchMaptwo(8, '南汇','330302025000')">
        <p class="font_w4 font_s20">
          0
          <span>位</span>
        </p>
        <area
          shape="poly"
          coords="531,314,544,312,556,307,574,305,590,306,611,311,644,318,665,325,680,330,694,339,701,350,707,366,706,380,701,388,697,399,686,411,671,421,642,430,620,428,598,423,584,413,567,388,553,383,541,369,536,337"
        />
      </div>
      <!-- 蒲鞋市 -->
      <div class="puxie map_icon" @click="switchMaptwo(9, '蒲鞋市','330302030000')">
        <p class="font_w4 font_s20">
          0
          <span>位</span>
        </p>
        <area
          shape="poly"
          coords="672,313,682,294,678,284,670,276,663,271,655,267,642,261,628,257,616,253,594,252,586,250,570,249,556,249,554,255,539,255,533,257,529,269,526,284,524,291,527,297,527,306,556,302,569,301,587,304,613,306,643,310"
        />
      </div>
      <!-- 滨江 -->
      <div class="binjiang map_icon" @click="switchMaptwo(10, '滨江','330302024000')">
        <p class="font_w4 font_s20">
          0
          <span>位</span>
        </p>
        <area
          shape="poly"
          coords="725,217,749,228,767,239,786,251,795,260,807,276,819,285,828,309,837,327,840,346,845,361,834,360,825,348,816,334,813,320,809,310,806,313,799,321,788,327,780,332,769,338,750,344,733,341,724,339,719,348,708,363,694,335,682,326,674,322,674,320,685,297,680,280,672,269,654,261,646,258,628,253,608,249,583,247,559,247,567,237,567,229,565,219,566,206,566,198,572,196,581,197,597,201,605,204,618,210,634,212,631,215,640,219,646,221,653,222,661,223,672,224,684,224,708,222"
        />
      </div>
    </map>
  </div>
</template>

<script>
export default {
  name: 'MapLuCheng',

  data () {
    return {
      qxname: '鹿城区',
      category: false,
      isActive: 1,
      cityThreeType: '8',
      cityThreeTitle: '',
      Hqlrsl: [],
      qxcode: '330302000000'
    }
  },
  mounted () {
    this.handle()
  },
  methods: {
    handle () {
      // 12.获取老人数量(会按照地区自动分类
      this.$http.post(this.$api.Hqlrsl.hqlrsl, this.qxcode, true).then(result => {
        let arr = result.data.response.countTotalRegionDoctor
        console.log('12.获取老人数量(会按照地区自动分类)', arr)
        for (let val of arr.values()) {
          this.Hqlrsl.push(val.num)
        }
      })
    },

    switchMaptwo (cityThreeType, cityThreeName, cityThreeJdCode) {
      var _this = this
      setTimeout(function () {
        /* console.log('cityThreeType(Map)' + cityThreeType)
        console.log('cityThreeName(Map)' + cityThreeName) */
        _this.$router.push({
          path: '/AreaThreeComponents',
          name: 'AreaThreeComponents',
          query: {
            key: 'key',
            cityThreeTypeKey: cityThreeType,
            cityThreeTitleKey: cityThreeName,
            cityThreeJdCodeKey: cityThreeJdCode,
            cityThreeQxcodeKey: _this.qxcode,
            cityThreeQxnameKey: _this.qxname

          }
        })
      }, 500)
    }
  }
}
</script>

<style lang="scss" scoped>
//地图
.mapbj {
  position: absolute;
  top: 15.5%;
  left: 22%;
  //地图点
  .map_icon {
    color: #214494;
    font-style: italic;:hover{color: #fff;
font-size: 1.375rem; }
    width: 7rem;
    height: 7rem;
    line-height: 2.4rem;
    text-align: center;
    background: url(../../../assets/img/home/2.png) no-repeat center;
    background-size: 100% 100%;
  }
}
.fengmen {
  position: absolute;
  top: 5%;
  left: 5%;
}
.shuangyu {
  position: absolute;
  top: 25%;
  left: 15%;
}
.guanghua {
  position: absolute;
  top: 30%;
  left: 34%;
}
.songtai {
  position: absolute;
  top: 38%;
  left: 42%;
}
.wuma {
  position: absolute;
  top: 25%;
  left: 54%;
}
.danan {
  position: absolute;
  top: 48%;
  left: 50%;
}
.nanjiao {
  position: absolute;
  top: 72%;
  left: 44%;
}
.nanhui {
  position: absolute;
  top: 66%;
  left: 69%;
}
.puxie {
  position: absolute;
  top: 41%;
  left: 65%;
}
.binjiang {
  position: absolute;
  top: 34%;
  left: 76%;
}
</style>
